<script setup lang="ts">
import { request } from '@/api';
import { closeToast, showLoadingToast, showToast } from 'vant';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

//地址
const address = ref<AddressItem>({} as AddressItem)
//控制省市区弹窗显示
const showLocationPopup = ref(false)
//获取省市区列表
const areaColumns = ref<AreaColumns>()
onMounted( async ()=>{
  areaColumns.value =  await mk.getAreaColumns()
})

const route = useRoute()
//进入页面时判断是编辑页还是新增页
onMounted( async ()=>{
  if(route.params.id){
    showLoadingToast({ message: '加载中...', duration: 0, forbidClick: true })
    document.title = '编辑地址'
    const res = await request.get<MkResponse<AddressItem>>(`member/address/${route.params.id}`)
     address.value = res.data.result 
     closeToast()
  }else{
    document.title = '新增地址'
    address.value.isDefault = 1
  }
})


//点击弹窗确定后执行逻辑
const onSelectedLocation = (area:{selectedValues:number[]}) => {
  //判断地址有没有数据,如果没有直接return
  if(!address.value) return
  
  //赋值,后续提交时使用
  address.value.provinceCode = area.selectedValues[0];
  address.value.cityCode = area.selectedValues[1];
  address.value.countyCode = area.selectedValues[2];

  //修改到页面上
  const province = areaColumns.value?.province_list[area.selectedValues[0]]
  const city = areaColumns.value?.city_list[area.selectedValues[1]]
  const county = areaColumns.value?.county_list[area.selectedValues[2]]
  address.value.fullLocation = `${province} ${city} ${county}`
  showLocationPopup.value = false;
}

//设为默认地址
const isDefault = computed({
set(value){
  if(address.value)address.value.isDefault = value ? 0 : 1
},
get(){
  return address.value?.isDefault === 0
}
})

const loading = ref(false)
const router = useRouter()
//提交表单
const submitForm = async ()=>{
  if (!address.value.receiver) {
    return showToast('请输入收货人')
  }
  if (!address.value.contact) {
    return showToast('请输入手机号码')
  }
  if (!/^1[1-9]\d{9}$/.test(address.value.contact)) {
    return showToast('手机号码格式不对')
  }
  if (!address.value.provinceCode) {
    return showToast('请选择所在区')
  }
  if (!address.value.address) {
    return showToast('请输入详细地址')
  }

  try {
    loading.value = true
    if(route.params.id){
      await request.put(`member/address/${address.value.id}`, address.value)
    }else{
      await request.post('member/address', address.value)
    }
    showToast('保存成功')
    router.back()
  } catch (error) {
    showToast('保存失败')
  }finally{
    loading.value = false
  }
}





</script>

<template>
  <div class="address-edit-page">
    <van-cell-group>
      <van-field v-model="address.receiver" label="收货人" placeholder="请输入收货人"></van-field>
      <van-field v-model="address.contact" label="手机号码" placeholder="请输入手机号码"></van-field>
      <van-field v-model="address.fullLocation" @click="showLocationPopup = true" label="所在地区" placeholder="请输入所在地区" readonly></van-field>
      <!-- 插入省市区选择组件 -->
      <van-popup v-model:show="showLocationPopup" round position="bottom">
        <van-area :area-list="areaColumns" @confirm="onSelectedLocation"></van-area>
      </van-popup>
      <van-field v-model="address.address" label="详细地址" type="textarea" placeholder="请输入详细地址">
      </van-field>
      <van-field label="设为默认地址" readonly>
        <template #extra>
          <van-checkbox v-model="isDefault" :icon-size="20" checked-color="var(--mk-red)"></van-checkbox>
        </template>
      </van-field>
    </van-cell-group>
    <div class="submit">
      <van-button :loading="loading" @click="submitForm" round block type="primary">
        保存
      </van-button>
    </div>
  </div>
</template>

<style lang="css" scoped>
.address-edit-page {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 80px;
}

.submit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16px;
  height: 80px;
}

.geo {
  width: 250px;
  height: 250px;
  overflow-y: auto;
}

.geo-title {
  font-size: 14px;
  color: var(--mk-gray);
  padding: 8px;
}

.geo-item {
  border-top: 0.5px solid var(--mk-under);
  padding: 8px;
}

.geo-item-label {
  font-size: 14px;
  color: var(--mk-red);
}

.geo-item-value {
  font-size: 12px;
  color: var(--mk-gray);
}
</style>